import React, { useState, useEffect }  from 'react'
import { Space, Tag, Pagination  } from 'antd';
import {getNews} from '../../api/news';

const { CheckableTag } = Tag;

const tagsData = [
    {label: '综合新闻',id: ''}, 
    {label: '新闻2',id: '2'}, 
    {label: '新闻3',id: '3'}, 
    {label: '新闻4',id: '4'}, 
    {label: '新闻5',id: '5'}, 
];

const Home = () => {
    const [selectedTag, setSelectedTag] = useState("");
    const [page, setPage] = useState(1);
    // const [newsList,setNewsList] = useState([]);
    // const [total,setTotal] = useState(0);
    const [news,setNews] = useState({});

    useEffect(()=>{
        getNews({newsType: selectedTag,page:page})
            .then(res=>{
                setNews(res.data)
                // setTotal(res.data.totalElements)
                // setNewsList(res.data.content)
            })
    },[selectedTag,page])

    const handleChange = (tag) => {
        setPage(1);
        setSelectedTag(tag.id);
    };
    const pageChange = (page)=>{
        setPage(page);
    }
    return (
        <>
            <Space size={[0, 8]} wrap>
                {tagsData.map((tag) => (
                    <CheckableTag
                        key={tag.id}
                        checked={selectedTag == tag.id}
                        onChange={() => handleChange(tag)}
                    >
                        {tag.label}
                    </CheckableTag>
                ))}
            </Space>
            <ul>
                {
                    news.content?.map(item=>{
                        return <li key={item.id}>
                            {item.newsTitle}
                        </li>
                    })
                }
            </ul>
            <Pagination onChange={pageChange} current={page} total={news.totalElements} />
            {/* <ul>
                {
                    newsList.map(item=>{
                        return <li key={item.id}>
                            {item.newsTitle}
                        </li>
                    })
                }
            </ul>
            <Pagination defaultCurrent={1} total={total} /> */}
        </>
    );
};
export default Home